import { useState, useEffect } from 'react'
import { Tabs, Modal } from 'antd'
import { SearchLangInPut } from '../index'
import { EditLangTable } from '../EditLangTable'
import type { LangType } from '../index'
import styles from './index.less'
const TabPane = Tabs.TabPane;

interface IEditLangTabs {
    langs: LangType[];
    pageOutId: string;
    code: string;
    visible: boolean;
    onOk?: () => void;
    onCancel?: () => void;

}

export const EditLangTabs = (props: IEditLangTabs) => {
    const [visible, $visible] = useState(false);
    const [search, $search] = useState('');
    useEffect(() => {
        $visible(props.visible)
    }, [props.visible]);

    return (
        <Modal
            visible={visible}
            onOk={() => {
                if (props.onOk) props.onOk()
                $visible(false)
            }}
            onCancel={() => {
                if (props.onCancel) props.onCancel()
                $visible(false)
            }}
            title={'修改多语言'}
            width={676}
            destroyOnClose
            footer={null}
            bodyStyle={{
                height: 450
            }}
            wrapClassName={styles.container}
        >
            <Tabs defaultActiveKey='business'
                tabBarExtraContent={{
                    right: <SearchLangInPut onSearch={(e) => {
                        $search(e.target.value)
                    }} />
                }}
            >
                <TabPane tab='组件内置' key='components'>
                    <EditLangTable
                        langs={props.langs}
                        pageOutId={props.pageOutId}
                        code={props.code}
                        isGlobalQuery={false}
                        searchValue={search} />
                </TabPane>
                <TabPane tab='全局依赖' key='globalDependencies'>
                    <EditLangTable
                        langs={props.langs}
                        isGlobalQuery={true}
                        pageOutId={props.pageOutId}
                        code={props.code}
                        searchValue={search} />
                </TabPane>
            </Tabs>
        </Modal>
    )
}

